import { MenuForm } from "@/components/menu-modal/types";
import { MenuListItem, MenuListVO } from "@/pojo/MenuListVO";
import SettingsService from "@/service/settings";
import { reactive, ref } from "vue";
import _debounce from "lodash/debounce";
import { UpdateMenuBO } from "@/service/settings/types";

export default function () {
  const ACTION_TYPE = {
    CREATE: "create",
    DETAIL: "detail",
  };

  const menuModalLoading = ref(false);
  const showMneuModal = ref(false);
  const menuList = ref<MenuListVO>([]);
  const menuTableLoading = ref(false);
  const menuActionType = ref<string>(ACTION_TYPE.CREATE);
  const menuModalTitle = ref<string>("创建菜单");

  const searchForm = reactive<{
    status: number | string;
    keyword: string;
    moduleId: number | string;
  }>({
    status: "",
    keyword: "",
    moduleId: "",
  });

  const menuModalData = ref<MenuForm>({
    name: "",
    url: "",
    moduleId: "",
    canDelete: 1,
  });

  const getAllMenu = () => {
    menuTableLoading.value = true;
    SettingsService.getAllMenu({
      status: searchForm.status,
      moduleId: searchForm.moduleId,
      keyword: searchForm.keyword,
    })
      ?.then((res) => {
        menuList.value = res.data || [];
      })
      .finally(() => {
        menuTableLoading.value = false;
      });
  };

  const handleShowCreateMenu = () => {
    menuModalData.value = {
      name: "",
      url: "",
      moduleId: "",
      canDelete: 1,
    };
    menuActionType.value = ACTION_TYPE.CREATE;
    menuModalTitle.value = "创建菜单";
    showMneuModal.value = true;
  };

  const handleShowEditMenu = (payload: MenuListItem) => {
    console.log(payload);
    menuActionType.value = ACTION_TYPE.DETAIL;
    menuModalTitle.value = payload.name;
    menuModalData.value = payload as MenuForm;
    showMneuModal.value = true;
  };

  /**
   * 调用创建菜单接口
   */
  const _handleCreateMenu = (payload: MenuForm) => {
    const params = {
      name: payload.name,
      slug: payload.slug,
      moduleId: payload.moduleId,
      canDelete: payload.canDelete,
      url: payload.url,
    };
    menuModalLoading.value = true;
    SettingsService.createMenu(params)
      .then((res) => {
        getAllMenu();
        showMneuModal.value = false;
      })
      .finally(() => {
        menuModalLoading.value = false;
      });
  };

  /***
   * 调用更新菜单接口
   */
  const _handleUpdateMenu = (payload: MenuForm) => {
    const params = {
      id: payload.id,
      name: payload.name,
      slug: payload.slug,
      moduleId: payload.moduleId,
      canDelete: payload.canDelete,
      url: payload.url,
      status: payload.status,
    } as UpdateMenuBO;
    menuModalLoading.value = true;
    SettingsService.updateMenu(params)
      .then((res) => {
        getAllMenu();
        showMneuModal.value = false;
      })
      .finally(() => {
        menuModalLoading.value = false;
      });
  };

  const handleMenuModalConfirm = (payload: MenuForm) => {
    if (menuActionType.value === ACTION_TYPE.CREATE) {
      _handleCreateMenu(payload);
    } else if (menuActionType.value === ACTION_TYPE.DETAIL) {
      _handleUpdateMenu(payload);
    }
  };

  const handleRemoveMenu = (menuId: string | number) => {
    SettingsService.removeMenu(menuId).then(() => {
      getAllMenu();
    });
  };

  const handleSearch = _debounce(function () {
    getAllMenu();
  }, 200);

  return {
    menuModalLoading,
    menuModalTitle,
    menuActionType,
    menuModalData,
    menuTableLoading,
    menuList,
    showMneuModal,
    searchForm,
    getAllMenu,
    handleShowCreateMenu,
    handleShowEditMenu,
    handleMenuModalConfirm,
    handleRemoveMenu,
    handleSearch,
  };
}
